<script setup>
const props = defineProps({
	percent: Number,
	balance: Number,
	fullPrice: Number
})

const color = computed(() => {
	switch (true) {
		case props.percent < 10: return 'red'
		case props.percent < 20: return 'orange'
		case props.percent < 30: return 'amber'
		default: return 'blue'
	}
})
</script>
<template>
	<UProgress :value="props.percent" :max="100" :color="color">
		<template #indicator="{ percent }">
			<div class="text-right" :style="{ width: `${percent}%` }">
				<span v-if="props.percent < 10" class="text-red-500">{{ props.balance }} из {{
					props.fullPrice
				}}</span>
				<span v-else-if="props.percent < 20" class="text-orange-500">{{ props.balance }} из {{
					props.fullPrice
				}}</span>
				<span v-else-if="props.percent < 30" class="text-amber-500">{{ props.balance }} из {{ props.fullPrice
					}}</span>
				<span v-else class="text-blue-500 font-bold">{{ props.balance }} из {{
					props.fullPrice }}</span>
			</div>
		</template>
	</UProgress>
</template>